<script setup lang="ts">
import { ref, watch } from "vue";
const props = defineProps({
  modelValue: {
    type: String,
  },
  placeholder: {
    type: String,
    default: "请输入",
  },
  type: {
    type: String,
    default: "text",
  },
  clearable: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  // icon显示状态
  iconState: {
    type: Boolean,
    default: false,
  },
  size: {
    type: String,
    default: "",
  },
});
const inputVal = ref(props.modelValue); // 修改: 初始化 inputVal 为 props.modelValue
const emit = defineEmits(["update:modelValue"]);
watch(
  () => props.modelValue,
  (val) => {
    inputVal.value = val;
  },
  { deep: true }
);
</script>

<template>
  <el-input
    v-model="inputVal"
    :type="props.type"
    :size="props.size"
    :disabled="props.disabled"
    :clearable="props.clearable"
    :placeholder="props.placeholder"
    @change="emit('update:modelValue', inputVal)"
  >
    <template #prefix v-if="props.iconState">
      <el-icon class="el-input__icon">
        <search />
      </el-icon>
    </template>
  </el-input>
</template>

<style scoped></style>